<%@ page language="Java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>幸运搜索</title>
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="common/static/iscroll/css/style.css">

</head>
<body>

<div class="page-group">
    <div class="page" id="page-index">
        <header class="bar bar-nav">
            <a class="icon icon-settings pull-left open-panel" data-panel=".panel-left"></a>
            <a class="button button-link button-nav pull-right open-popup" data-popup=".popup-about">
                关于
                <span class="icon icon-menu"></span>
            </a>
            <h1 class="title">幸运搜索</h1>
        </header>
        <div class="content">
            <div class="content-inner">
                <div class="bar">
                    <div class="searchbar">
                        <a class="searchbar-cancel">取消</a>
                        <div class="search-input">
                            <form id="search_from" target="nm_iframe">
                                <label class="icon icon-search" for="search"></label>
                                <input type="search" id='search' placeholder='输入关键字...'/>
                            </form>
                            <iframe id="nm_iframe" name="nm_iframe" style="display:none;"></iframe>
                        </div>
                    </div>
                </div>
                <!--
                加载html
                -->

                <div id="wrapper">
                    <div class="scroller">
                        <table class="table">
                            <thead>
                            <tr>
                                <th>结果名称</th>
                                <th>创建时间</th>
                                <th>文件大小</th>
                                <th>热度</th>
                            </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                        <div class="more"><i class="pull_icon"></i><span>上拉加载...</span></div>
                    </div>
                </div>


            </div>
        </div>
    </div>



    <div class="popup popup-about">
        <header class="bar bar-nav">
            <a class="button button-link button-nav pull-right close-popup">
                关闭
            </a>
            <h1 class="title">关于 幸运搜索</h1>
        </header>
        <div class="content">
            <div class="content-inner">
                <div class="content-block">
                    <p>提供互联网共享资源检索服务</p>
                    <p>免责声明：本站搜索结果来自互联网自定义搜索，不存储任何内容，只提供信息检索服务。</p>
                    <p>如果有侵犯的地方，联系我们及时整改。站长：雪花（QQ:2089646792）</p>
                    <p><a class="button close-popup">确定</a></p>
                </div>
            </div>
        </div>
    </div>

    <div class="panel-overlay"></div>
    <!-- Left Panel with Reveal effect -->
    <div class="panel panel-left panel-reveal">
        <div class="content-block">
            <p>这是一个侧栏</p>
            <p></p>
            <!-- Click on link with "close-panel" class will close panel -->
            <p><a href="#" class="close-panel">关闭</a></p>
        </div>
    </div>
</div>

<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
<script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="common/static/iscroll/js/iscroll.js"></script>
<script>
    var myscroll = new iScroll("wrapper",{
        onScrollMove:function(){
            if (this.y<(this.maxScrollY)) {
                $('.pull_icon').addClass('flip');
                $('.pull_icon').removeClass('loading');
                $('.more span').text('释放加载...');
            }else{
                $('.pull_icon').removeClass('flip loading');
                $('.more span').text('上拉加载...')
            }
        },
        onScrollEnd:function(){
            if ($('.pull_icon').hasClass('flip')) {
                $('.pull_icon').addClass('loading');
                $('.more span').text('加载中...');
                pullUpAction();
            }

        },
        onRefresh:function(){
            $('.more').removeClass('flip');
            $('.more span').text('上拉加载...');
        }

    });

    $("#search_from").submit(function(e){
        alert("Submitted");
    });
    var currentCount = 1;
    function pullUpAction(){
        currentCount ++;
        $.ajax({
            url:'getSearchData',
            data:{currentPage:currentCount,searchValue:jQuery("#search").val()},
            type:'post',
            dataType:'json',
            success:function(data){
                if(data.code == "success")
                {
                    if(data.dataList != undefined)
                    {
                        var htmlValue = "";
                        for(var index = 0;index <data.dataList.length;index ++ )
                        {
                            htmlValue += "<tr>";
                            htmlValue += "<td>" +  data.dataList[index].fileName  + "</td>";
                            htmlValue += "<td>" +  data.dataList[index].createDate  + "</td>";
                            htmlValue += "<td>" +  data.dataList[index].fileSize  + "</td>";
                            htmlValue += "<td>" +  data.dataList[index].heat  + "</td>";
                            htmlValue += "</tr>";
                        }
                        $('.scroller tbody').append(htmlValue);
                        myscroll.refresh();
                    }
                }
            },
            error:function(){
                console.log('error');
            },
        })
    }
    if ($('.scroller').height()<$('#wrapper').height()) {
        $('.more').hide();
        myscroll.destroy();
    }

</script>
</body>
</html>